import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Row, Col } from 'antd';
import { useRef, useEffect } from 'react';
import { connect, useHistory } from 'umi'

export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};



const HousesList = (props: any) => {
    const { housesList, init } = props
    const actionRef = useRef<ActionType>();
    const router = useHistory()
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            title: 'ID',
            dataIndex: 'id',
            ellipsis: true,
        },
        {
            title: '楼盘名称',
            dataIndex: 'title',
            ellipsis: true,
            copyable: true,
            tip: '标题过长会自动收缩',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: '此项为必填项',
                    },
                ],
            },
        },
        {
            title: '所属区域',
            dataIndex: 'title123',
            ellipsis: true,
        },
        {
            title: '价格',
            dataIndex: 'price',
            ellipsis: true,
        },
        {
            title: '更新时间',
            dataIndex: 'update_time',
            ellipsis: true,
        },

        {
            title: '排序',
            dataIndex: 'ordid',
            ellipsis: true,
        },
        {
            title: '状态',
            dataIndex: 'status',
            ellipsis: true,
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            width: 240,
            render: (text, record, _, action) => {
                return <div>
                    <Row>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} size="small">户型</Button>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} size="small">户型</Button>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} onClick={() => {
                                router.push("/houses/dynamic")
                            }} size="small">动态</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} onClick={() => {
                                router.push("/houses/sand")
                            }} size="small">沙盘</Button>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} size="small">户型</Button>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <Button style={{
                                margin: 5
                            }} size="small">户型</Button>
                        </Col>
                    </Row>
                </div>
            }
        },
    ];
    useEffect(() => {
        init()
    }, [])
    return (
        <ProTable<GithubIssueItem>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            dataSource={housesList}
            rowSelection={{
                // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                // 注释该行则默认不显示下拉选项
                // selections: [Table.SELECTION_ALL]
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    // console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="高级表格"
            toolBarRender={() => [
                <Button
                    key="button"
                    icon={<PlusOutlined />}
                    onClick={() => {
                        actionRef.current?.reload();
                    }}
                    type="primary"
                >
                    新建
                </Button>,
                <Dropdown
                    key="menu"
                    menu={{
                        items: [
                            {
                                label: '1st item',
                                key: '1',
                            },
                            {
                                label: '2nd item',
                                key: '1',
                            },
                            {
                                label: '3rd item',
                                key: '1',
                            },
                        ],
                    }}
                >
                    <Button>
                        <EllipsisOutlined />
                    </Button>
                </Dropdown>,
            ]}
        />
    );
};

const mapState = (state: any) => {
    const { houses: { housesList } } = state
    return {
        housesList
    }
}

const mapDispatch = (dispatch: any) => {
    return {
        init() {
            dispatch({ type: "houses/GET_HOUSES_LIST" })
        }
    }
}

export default connect(mapState, mapDispatch)(HousesList)